<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6"><![endif]-->
<!--[if IE 7 ]><html class="ie ie7"><![endif]-->
<!--[if IE 8 ]><html class="ie ie8"><![endif]-->
<!--[if IE 9 ]><html class="ie ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html><!--<![endif]-->
<head>
	<meta charset="utf-8">
	<meta name="renderer" content="webkit" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="initial-scale=1,minimum-scale=1" />
	<title>活动管理-活动报名信息</title>
	<c:import url="/public/head-tag.jsp"/>
	<style>
	.item-toolbar{padding:5px;}
	.toolbar-title{font-size:14px}
	</style>
</head>
<body>
    <c:import url="/public/header.jsp"/>
    
    <section class="container">
		<c:set var="sidebar" scope="request" value="content"/>
	    <c:set var="navbar" scope="request" value="activity"/>
	    <c:import url="/public/sidebar.jsp"/>
	    
    	<div class="content">
    		<div class="content-top">
    			<h3 class="content-title">
    				 <div class="bread">
    					<a href="/Manager/web/action/listPage">活动管理</a>
    					<span>&gt;</span>
    					<span>活动数据</span>
    				</div>
    			</h3>
    				
    		</div>
    		
    		<div class="content-main">
				<section class="content-item" data-template="item/list" id="box">
					<div class="content-item-top">
						<div class="item-toolbar">
							<span class="toolbar-title" v-text="form.title"></span>
							<div class="fn-right">
                               <a id="exportDoc" href="/Manager/web/apply/exportExcel?id={{form.id}}&title={{form.title}}"  target="_blank" class="btn btn-default btn-medium">导出excel</a>    			  
                            </div>
						</div> 
						<form action="/Manager/web/vote/apply/exportSearch" method="get" autocomplete="off">
							
							<div class="filter-item">
								<label for="">时间</label>
								<input type="text" class="text text-100" placeholder="开始时间" name="sdate" date-range/>
								<span>至</span>
								<input type="text" class="text text-100" placeholder="结束时间"  name="edate" date-range/>
							</div>
                            <div class="filter-item">
								<label for="">选手状态</label>
								<select name="status" class="select">
									<option value="">所有</option>
									<option value="1">正常参选</option>
									<option value="0">不符合要求</option>
								</select>
							</div>
							<div class="filter-item">
								<label for="">排序条件</label>
								<select name="order" class="select">
								    <option value="applyId">默认为报名序号</option>
									<option value="applyId">报名序号</option>
									<option value="item06">总票数</option>
									<option value="applyTime">报名时间</option>
								</select>
							</div>
							<div class="filter-item">
								<input type="hidden" name="page" value="1"/>
								<input type="hidden" name="id"   value="{{form.id}}"/>
							</div>
						</form>
					</div>
					
					<div class="content-item-block">
							<table class="table">
								<thead>
								<tr>
									<th style="width:10%">报名时间</th>
									<th style="width:10%">用户</th>
									<th style="width:10%">报名号</th>
									<th style="width:10%">报名信息</th>
									<th style="width:20%">报名图片</th>
									<th style="width:10%">总票数</th>
									<th style="width:10%">拉票宣言</th>
									<th style="width:10%">选手状态</th>
									<th style="width:10%">操作</th>
								</tr>
								</thead>
								<tbody id="sortable">
									<tr>
										<td class="align-center" colspan="5">
											<div class="loading">加载中...</div>
										</td>
									</tr>
								</tbody>
							</table>
					</div>
					
				</section>
    		</div>
    	</div>
    </section>
    
   <script type="text/template"  id="item/list" note="订单列表">
		{{if  !code }}
			<tr><td colspan="5" class="color-red">查询错误！</td></tr>
        {{else if code!=200}}
			<tr><td colspan="5" class="color-red">{{msg || '查询错误！'}}</td></tr>
        {{else if !data.datalist || data.datalist.length==0}}
			<tr><td colspan="5">没有记录！</td></tr>
		{{else}}
			{{each data.datalist as item}}
				<tr>
					<td>
						<p>{{item.applyTime | dateFormat:'yyyy-MM-dd'}} </p>
						<p class="value-note">{{item.applyTime | dateFormat:'HH:mm'}}</p>
					</td>
					<td><p>{{item.name}}&nbsp;</p> <p class="value-note"> {{item.applicator}} </p></td>
					<td><p>{{item.item05}}</p></td>
                    <td>{{#item | itemMatch:headlist | renderAttrList}}</td>
					<td><img src="/Manager/web/resource/download?resourceId={{item.item09}}" style=" width: 100px;  height:100px;"/></td>
                    <td><p>{{item.item06}}</p></td>
                    <td><p>{{item.item07}}</p></td>
                    <td>
						{{if item.status == 1}}
						<p>正常</p>
						{{/if}}
						{{if item.status != 1}}
						<p>选手已设为不符合活动要求</p>
						{{/if}}
					</td>
					<td>
					  <a href="javascript:;" action="item.changeState" data-params="{{item | pick:'applyId:id,status' | toJSON}}" class="action-link"> {{if item.status==1}}设为不符合活动要求 {{/if}} {{ if item.status==-1 || item.status==0}}设置为正常{{/if}}</a>
					</td>
				</tr>
			{{/each}}
		{{/if}}
    </script>

    <script type="text/template" id="item/changeItemState" note="活动上下线">
    	<form action="/Manager/web/vote/apply/update" method="post">
			<div class="align-center">确定要把该条报名信息置为<b class="state-red">{{if status==1}}无效{{else}}正常{{/if}}</b>吗？</div>
			<input type="hidden" name="applyId" value="{{id}}" />
            <input type="hidden" name="status" value="{{status}}" />
    	</form>
    </script> 
    
   <script type="text/template"  id="item/attrList" note="报名项目信息">
		<ul class="attr-list">
			{{each list as item}}
					<li>{{item.name}}:{{item.value}}</li>
			{{/each}}
		</ul>
    </script>
    
    
   <script src="/pages/assets/js/require.all.js"></script>
   <script>
        requirejs([
            'vue', 
            'artTemplate', 
            'artDialog',
            
            'utils.search', 
            'utils.action', 
            'utils.converter', 
            'vender.modal', 
            
            'jquery.daterangepicker', 
            'jquery.ajaxsubmit',
            'jquery.formcheck',
            'jquery.common',
            'jquery.pager'
        ], 
        function(Vue, template, dialog, Search, ActionModel, Converter, Modal){
            
        	var search = new Search().getParams();
        	
            var Action = new ActionModel({
                maps:{
                    'form.detail' : '/Manager/web/action/detail?id={id}'
                }
            })
            
            template.helper('itemMatch',function(item, headers){
                var list=[];
                $.each(headers, function(i,data){
                    list.push({
                        name:data.title,
                        value:item['item0'+i]
                    })
                })
                return list;
            })
            
            template.helper('renderAttrList',function(list){
                return template('item/attrList',{list:list})
            })
            
            var App={
                
                alert : function(){
                   return Modal.alert.apply(this, arguments) ;
                },
                
                getAppData :function(){
                    
                    var dtd = $.Deferred();
                    
                    var url = Action.get('form.detail', search);
                    $.getJSON(url, function(result){
                        var code = result.code;
                        if(code==200){
                            dtd.resolve(result.data)
                        }else{
                            var msg = result.msg || '数据获取失败！';
                            dtd.reject(msg)
                        }
                    })
                    .fail(function(e, type, msg){
                        dtd.reject(type + msg)
                    })
                    return dtd;
                },
                
                initApp:function(appData){
                    new Vue({
                        el:'body',
                        computed:{
                            'form':function(){
                                return this.getStore().form;
                            }
                        },
                        filters:{
                            formatDate :function(date, format){
                                format = format || 'YYYY-MM-DD HH:mm';
                                return moment(date).format(format)
                            }
                        },
                        methods:{
                            
                            getInitData :function(){
                                return {
                                    store:{
                                        form:appData
                                    }
                                }
                            },
                            
                            getStore :function(){
                                return this.store;
                            }
                        },
                        data:function(){
                            return this.getInitData()
                        }
                    })
                },
                
                initDatePicker:function(){
                    var $dates=$("[date-range]").dateRangePicker({
                        separator : '至',
                        getValue: function(){
                            return '';
                        },
                        setValue: function(s,s1,s2){
                            return false;
                        }
                    })
                    .on("datepicker-apply",function(e,date){
                        $dates.eq(0).val(date.date1.format('yyyy-MM-dd'));
                        $dates.eq(1).val(date.date2.format('yyyy-MM-dd'));
                        $(this).parents("form:first").submit()
                    })
                },
                
                reloadItems : function() {
                    $("#box").reload();
                },
                
                changeItemState : function(data) {
                    var id = "item/changeItemState";
                    var title = "警告";
                    var content = template(id, data);
                    var idialog = dialog({
                        id : id,
                        zIndex : 5,
                        width : 300,
                        padding : "40px 20px",
                        title : title,
                        content : content,
                        button : [
                                {
                                    id : "cancel",
                                    value : "取消"
                                },
                                {
                                    id : "ok",
                                    value : "提交修改",
                                    autofocus : true,
                                    callback : function() {
                                        var $form = this
                                                .getContent()
                                                .find("form");
                                        $form
                                                .ajaxSubmit({
                                                    onSuccess : function(
                                                            result) {
                                                        var code = result.code;
                                                        if (code == 200) {
                                                            idialog.remove();
                                                            App.reloadItems();
                                                        } else {
                                                            var msg = result.msg
                                                                    || "提交失败！";
                                                            App.alert(msg);
                                                        }
                                                    }
                                                })
                                        return false;
                                    }
                                } ]
                    })
                    idialog.showModal();
                },
                
                initEvents:function(){
                    
                    $("[data-template]").ajaxLoad({
                        beforeSubmit:function(){
                            var $this=$(this);
                            var data=$this.serialize();
                            var $exportDoc=$("#exportDoc");
                            $exportDoc.attr("href",$exportDoc.data("href")+data);
                        },
                        dataFilter:function(res){
                            return res;
                        }
                    });
                    
                    $("body").on("click","[action]:not(form)",function(){
                        var $this=$(this);
                        var action=$this.attr("action");
                        var data=$this.data("params");
                        if (action == "item.changeState") {
                            App.changeItemState(data);
                        }
                        return false;
                    })
                },
                
                init : function(){

                    
                    var app = this;
                    
                    app.getAppData().then(function(data){
                        
                        data = new Converter({
                            'id':'actionId'
                        }).convert(data)
                        
                        app.initApp(data);
                        app.initDatePicker();
                        app.initEvents();
                        
                        $("[data-template]").ajaxLoad({
                            beforeSubmit:function(){
                                var $extBtn=$("#exportBtn");
                                var href=$extBtn.data('href');
                                var params=$(this).find("form").serialize();
                                $extBtn.attr('href',href+params);
                            },
                            dataFilter:function(res){
                                //app.showStatistics(res);
                                return res;
                            }
                        });
                        
                    })
                    .fail(function(msg){
                        app.alert(msg)
                    })
                }
            }
            App.init();
        })
        </script>
    </body>
</html>